<template>
    <div class="box_cont topic_cont flex_column_between"  ref="boxfull" v-loading="loading">
        <audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none"></audio>
        <div class="w-full flex_center_between">
            <img class="back_img cur" @click="backFn" src="@/assets/img/back.png" />
            <h5>{{ mapTitle }}</h5>
            <div></div>
        </div>
        <template v-if="currentWords.length > 0">
            <div class="work_cont"> 
                <div class="item cur transition" :class="{active: activedIndex == index}" v-for="(item, index) in currentWords" :key="index" @click="playAudio(index, item)">
                    <div class="cur">  
                        <p class="bold">
                            {{ !translationShow[index] || translationShow[index] != 3 ? item.word : '--'  }}   
                            <span style="margin-left: 4rem;">{{ translationShow[index] == 2 ? item.translation : '' }}</span> 
                        </p>
                    </div>
                </div>
            </div>
            <div class="btn_cont flex_center_between">
                <p class="left_num"> 
                    <span class="num1" style="color: red;">{{ group }}</span>
                    <span class="num2">/{{ totalGroup }}</span>
                </p>
                <div class="flex-1 flex justify-end">
                    <el-button id="fullscreen_button" style="width: 183px;font-size:2rem;" type="warning" @click="prevGroupFn" v-if="isAllStatus.length == currentWords.length && this.totalGroup > 1 && (this.group > 1 || this.group == this.totalGroup)">
                        <div class="flex_c_c"><img style="margin-right: 12px;width: 2rem" src="@/assets/img/cut.png" alt="">上一组</div> 
                    </el-button>
                    <el-button id="fullscreen_button" style="width: 183px;font-size:2rem;" type="warning" @click="nextGroupFn" v-if="isAllStatus.length == currentWords.length && this.totalGroup > 1 && this.group < this.totalGroup">
                        <div class="flex_c_c"><img style="margin-right: 12px;width: 2rem" src="@/assets/img/cut.png" alt="">下一组</div> 
                    </el-button>
                    <el-button id="fullscreen_button" style="width: 183px;font-size:2rem;" type="warning" @click="printFun">
                        <div class="flex_c_c cur"><img style="margin-right: 12px;width: 2rem" src="@/assets/img/print_2.png" alt=""> 打印</div> 
                    </el-button>
                    <el-button id="fullscreen_button" style="width: 183px;font-size:2rem;" type="primary" @click="shuffleArray">
                        <div class="flex_c_c cur"><img style="margin-right: 12px;width: 2rem" src="@/assets/img/random.png" alt=""> 随机</div> 
                    </el-button>
                </div>
            </div>
        </template>
        <template v-else>
            <empty type="1" text="暂无词汇，快去阅读加入生词吧" />
        </template>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { wordList } from '@/api/articleWord.js'
import config from '@/config/index.js'
export default {
    components:{
    },
    data() {
        return {
            mapTitle: '单词标识',
            loading: false,
            exerciseId: 0,
            articleId: 0,
            userId: 0,
            wordsList: [],
            groupWordList: [], //按组分的全部词汇
            currentWords: [], //当前组的词汇
            group: 0,//当前第几组
            totalGroup: 0,//总共几组
            wordPlayStatus: [],
            translationShow: [],
            currentPlayIndex: 0,
            voiceUrl: '',
            isAllStatus: [],
            activedIndex: null,
            backgroundIndex: 1, // 初始位置
            moves: [1, 0, 1, 2, 1, 0, 1, 2, 3, 2, 1, 0, 1, 2, 3, 4, 3, 2, 3, 4, 1, 0, 1, 0, 1, 2, 3, 4, 3, 2, 1, 0], // 标记移动位置
            currentMoveIndex: -1, // 当前移动的索引
        }
    },
    computed: {
        ...mapState({ userInfo: state => state.user.userInfo })
    },
    mounted(){
        this.exerciseId = this.$route.query.exerciseId || 0
        this.userId = this.$route.query.userId || 0
        this.articleId = this.$route.query.articleId || 0
        this.getWordList()
    },
    methods:{
        getWordList() {
            this.loading = true
            wordList({articleId: this.articleId, userId: this.userId}).then(res => {
                if (res.error == 0) {
                    this.wordsList = res.data
                    if (this.wordsList.length > 0) {
                        this.totalGroup = Math.ceil(this.wordsList.length / 5)
                        let groupWordList = []
                        //按每5个一组进行分组
                        for (let i = 0; i < this.totalGroup; i++) {
                            groupWordList.push(this.wordsList.slice(i * 5, (i + 1) * 5))
                        }
                        this.groupWordList = groupWordList
                        this.currentWords = groupWordList[0]
                        this.group = this.totalGroup > 0 ? 1 : 0
                    }
                    
                }
            }).finally(() => {
                this.loading = false
            })
        },
        shuffleArray() {
            if (this.currentWords.length <= 1) {
                return
            }
            let newWords = this.currentWords.slice(0);
            for(let i = newWords.length - 1; i > 0; i--){
                const j = Math.floor(Math.random() * (i + 1));
                [newWords[i], newWords[j]] = [newWords[j], newWords[i]];
            }
            if (this.currentWords.length !== 0 && this.arraysEqual(newWords, this.currentWords)) {
                return this.shuffleArray();
            }
            this.currentWords = newWords;
        },
        arraysEqual(a, b) {
            return a.length === b.length && a.every((val, index) => val === b[index]);
        },
        //点击播放
        playAudio(index, word) {
            this.activedIndex = index
            this.moveBackground(index)
            this.wordPlayStatus = []
            if (!this.isAllStatus.length || this.isAllStatus.indexOf(index) == -1) {
                this.isAllStatus.push(index)
            }
            if (this.currentPlayIndex != index) {
                this.translationShow = []
            }
            this.currentPlayIndex = index
            this.translationShow[index] = !this.translationShow[index] || this.translationShow[index] == 3 ? 1 : this.translationShow[index] + 1 
            if (word.voiceFile) {
                this.voiceUrl = word.voiceFile.url
                this.$nextTick(() => {
                    this.$refs.audio.play()
                    this.wordPlayStatus[index] = true
                })
                this.$forceUpdate()
            } 
        },
        //顺序播放
        playWord() {
            if (this.activedIndex == null) {
                this.activedIndex = 0
            }else {
                if (this.activedIndex < this.wordsList.length - 1) {
                    this.activedIndex ++
                }else if (this.activedIndex == this.wordsList.length - 1) {
                    this.activedIndex = 0
                }
            }
            let word = this.currentWords[this.activedIndex]
            this.voiceUrl = word.voiceFile.url
            this.$nextTick(() => {
                this.$refs.audio.load()
                this.$refs.audio.play()
            })
        },
        playEnd() {
            this.wordPlayStatus = []
        },
        // 单词标记移动
        moveBackground(clickedIndex) {
            if (this.wordsList.length <= 2) {
                return
            }
            if (this.backgroundIndex === 1 && clickedIndex === 1 && this.currentMoveIndex === -1) {
                this.currentMoveIndex++;
            }
            if (clickedIndex === this.backgroundIndex) {
                if (this.currentMoveIndex < this.moves.length - 1) {
                    this.currentMoveIndex++;
                    this.backgroundIndex = this.moves[this.currentMoveIndex];
                    if (this.currentMoveIndex >= 23 && this.box == 0 && this.wordsList.length == 5) {
                        this.mapTitle = '本组复习'
                    }
                } else {
                    this.backgroundIndex = -1; // 隐藏背景
                    if (this.box == 0 && this.wordsList.length == 5) {
                        this.mapTitle = '听音识词'
                    }
                }
            }
        },
        // 下一组
        nextGroupFn(){
            if (this.group < this.totalGroup) {
                this.group ++
                this.currentWords = this.groupWordList[this.group - 1]
                this.activedIndex = null
                this.backgroundIndex = 1
                this.currentMoveIndex = -1
                this.isAllStatus = []
            }
        },
        // 上一组
        prevGroupFn(){
            if (this.group > 1) {
                this.group --
                this.currentWords = this.groupWordList[this.group - 1]
                this.activedIndex = null
                this.backgroundIndex = 1
                this.currentMoveIndex = -1
                this.isAllStatus = []
            }
        },
        // 打印
        printFun() {
            let url = config.basePrintUrl + '/words?id=' + this.articleId
            if (this.userId) {
                url += '&userId=' + this.userId
            }else {
                url += '&teacherId=' + this.userInfo.id
            }
            window.open(url)  
        },
        backFn(){
            this.$router.go(-1);
        }
    }
}
</script>

<style lang="scss" scoped>
.box_cont{padding-bottom:2rem;}
.justify-end{padding-left: 2rem}

.po{
    width: 0;
    height: 0;
}

.active{
    background: #F69B2C !important;
    color: #fff !important;
    border-left: 1rem solid #F69B2C !important;
}
.topic_cont{
    text-align: center;
    h5{
        width: 100%;
        font-size: 3.2rem;
        font-weight: normal;
        margin-bottom: 1rem;
        color: #fff;
        // margin-right: 31.7rem;
    }
}



.work_cont{
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    // overflow-y: scroll;
    align-self:baseline;
    box-sizing: border-box;
    // padding: 1rem 20% 0;
    padding: 2rem 71.7rem 0 10rem;
    overflow-y: auto;
    
    .item{
        width: 100%;
        min-height: 12rem;
        text-align: left;
        color: #27369C;
        background: #E8EBFF;
        border-radius: 10px;
        margin-bottom: 2rem;
        font-size: 5.4rem;
        padding-right: 1rem;
        overflow-y: auto;
        display: flex;
        align-items: center;
        // justify-content: center;
       
        border-left: 1rem solid #E8EBFF;

        // padding: 20px 0;
        &:hover{
            background: #F69B2C;
            color: #fff;
            border-left: 1rem solid #F69B2C;

            .text{
                color: #fff;
            }
        }
        .cur{
            padding: 1rem 3.2rem;
        }
        .text{
            font-size: 3.2rem;
            margin-top: 1rem;
        }
        &:last-child{
            margin-bottom: 0px;
        }
         &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
            margin-right: 1rem;
        }
        /* 滑块部分 */
        &::-webkit-scrollbar-thumb { 
            border-radius: 5px;
            background-color:#019E69;
        }
        // /* 轨道部分 */
        &::-webkit-scrollbar-track { 
        //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: transparent;
            // border-radius: 5px;
        }
    }
    
    .mark {
        border-left: 1rem solid #4FD8E4;
    }
    .status{
        background: #F69B2C;
        color: #fff;
    }

    // &::-webkit-scrollbar {
    //     width: 6px;
    //     height: 1px;
    // }
    // /* 滑块部分 */
    // &::-webkit-scrollbar-thumb { 
    //     border-radius: 5px;
    //     background-color:#019E69;
    // }
    // /* 轨道部分 */
    &::-webkit-scrollbar-track { 
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: transparent;
        // border-radius: 5px;
    }

}
.btn_cont{
    width: 100%;
    // padding: 2rem calc(20% + 6px) 0;
    padding: 2rem 71.7rem 0 10rem;
    //border-top: 1px solid #4762BB;
    .left_num{
        margin: auto 0;
        font-size: 3.6rem;
        font-weight: bold;
        .num1{
            color: #FF5252;
        }
        .num2{
            color: #767676;

        }
    }
}
.back_img{
    width: 4rem;
    height: 4rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
    }
}
.w-full{
    width: 100%;
    padding: 1rem 71.7rem 0 10rem;
}

</style>
